<?php get_backend_header(array(
	'jquery/validate/jquery.validate.js',
        'jquery/validate/additional-methods.js',
)); ?>

<?php get_group_sidebar($group['group_id']); ?>
<div id ="content" >
    <h2 class="title"> Board</h2>

    <div class ="form ui-corner-all" style ="background-color: white; height: 200px;overflow-y: scroll">
        <div id ="posted_messages">
            fetching messages...
        </div>
    </div>

    <form id="post_message" name="post_message" class="form" method="POST">
            <input type="hidden" id="group_id" name="group_id" value="<?php echo $group['group_id']; ?>" />

                <div class="unit">

                    <div class="line">
                            <label for="" class="bold" style ="text-align: left; width: 55px;">Message:</label>
                            <div class="field" style="width: auto">
                              <input type="text" name="message" id="message" />
                              <button id="save" name="save">Post</button>
                            </div>
                    </div>

                </div>
            <div class ="clear"></div>
    </form>
    
</div>


<script type="text/javascript">
    url = siteUrl +'board/get_messages/'+$('#group_id').val();

    setInterval("$('#posted_messages').load(url)", 1000);
	
	$('#save').button({
		icons: {primary: 'ui-icon-disk'}
	}).click(function(e) {
            e.preventDefault();
            if ($('#message').val() == '') {
                alert('Please enter a message');
                return false;
            }

            $.ajax({
                url: siteUrl + 'board/submit',
                type: 'post',
                data: $('#post_message').serialize(),
                success: function(response) {
                    return false;
                }
            });

            $('#message').val('');

            $(this).removeClass('ui-state-focus');

	});

</script>

<?php get_backend_footer(); ?>
